<template>
    <div class="big">
        <div class="one">
 <i class="el-icon-s-unfold"></i>
 后台管理系统
        </div>
        <div class="two">
            <span class="full-screen" @click="fullScreen()"> <i class="el-icon-full-screen" style="margin-right: 20px;"></i></span>
            不懂温柔
                <i class="el-icon-arrow-down"></i>
           
        </div>
       
    </div>
</template>
<script>
import screenfull from "screenfull";
export default {
    data() {
        return {
            fullscreen: false,
        }
    },
    methods: {
        fullScreen() {
    if (!screenfull.isEnabled) {
    this.$message({
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }
  screenfull.toggle()
},


// 点击全屏展示
// fullScreen() {
//   const bodyEle = document.getElementById('data-screen')
//   if (!screenfull.isEnabled) {
//     this.$message({
//       message: 'you browser can not work',
//       type: 'warning'
//     })
//     return false
//   }
//   screenfull.toggle(bodyEle,pickerPanel)
// },
    },
}
</script>
<style scoped>
.big{
    position: relative;
}
    .one{
        font-size: 30px;
        color: white;
     margin: -22px 60px;
    }
    .two{
        color: white;font-size: 20px;
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>